<template>
  <div class="quanbu">
    <div class="Daohang clear">
      <div class="clear DaoHang">
        <div class="Left">
          <img :src="img"
               alt="">
        </div>
        <div class="Mid">
          <div>
            <div class="idname">
              <p>{{username}}</p>
            </div>
            <div class="idbtn">
              <el-button plain
                         @click="onQuit">退出登录</el-button>
            </div>
          </div>
          <div id="yuangong">
            <p>员工ID：{{userid}}</p>
            <el-col :span="12">
              <el-dropdown trigger="click">
                <span class="el-dropdown-link">
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-descriptions direction="horizontal"
                                   :size="size"
                                   :column='1'
                                   :colon='false'>
                    <el-descriptions-item label="用户名:">{{form.user_name}}</el-descriptions-item>
                    <el-descriptions-item label="账号:">{{form.user_tel}}</el-descriptions-item>
                    <el-descriptions-item label="门店:">{{form.user_company}}</el-descriptions-item>
                    <el-descriptions-item label="地址:">{{form.user_address}}</el-descriptions-item>

                    <el-descriptions-item>
                      <el-button type="primary"
                                 class="btn1"
                                 @click="$router.push('/employee/systememployee/basic')">修改信息
                      </el-button>
                    </el-descriptions-item>

                  </el-descriptions>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
          </div>
        </div>
      </div>
      <div class="daohang">
        <el-menu class="el-menu-demo"
                 mode="horizontal"
                 router>
          <el-menu-item index="/employee/homepageemployee">工作台</el-menu-item>
          <el-menu-item index="/employee/order">点餐</el-menu-item>
          <el-menu-item index="/employee/table">桌位</el-menu-item>
          <el-menu-item index="/employee/indentemployee/todayorder">订单</el-menu-item>
          <el-menu-item index="/employee/foodmanage">菜品管理</el-menu-item>
        </el-menu>
      </div>
      <div class="icon">
        <i class="el-icon-message-solid"></i>
      </div>

    </div>

    <router-view />

  </div>
</template>

<script>
export default {
  data () {
    return {
      img: '',
      form: {
        user_name: '',
        user_tel: '',
        user_company: '',
        user_address: ''
      },
      username: '',
      userid: '',
      size: 'small'
    }
  },
  mounted: function () {
    this.userid = JSON.parse(sessionStorage.getItem('user')).user_id
    this.username = JSON.parse(sessionStorage.getItem('user')).user_name
    this.form = JSON.parse(sessionStorage.getItem('user'))
    this.img = require('../assets/' + JSON.parse(sessionStorage.getItem('user')).user_img)
  },
  methods: {
    onSubmit () {

    },
    onQuit () {
      this.$message({
        message: '退出成功',
        type: 'success',
        duration: 2000
      });
      this.$router.push({ path: '/login' })
    }
  }
}
</script>

<style  scoped>
img {
  width: 50px;
  height: 50px;
  border-radius: 50px;
  margin-right: 20px;
}
.DaoHang {
  width: 20%;
  float: left;
}
.Left {
  float: left;
  /* width: 40%; */
  margin-top: 14px;
}
.Mid {
  float: left;
  width: 60%;
  margin-top: 16px;
}

.daohang {
  float: left;
  width: 65%;
  margin-left: 10%;
  margin-top: 10px;
}
#key {
  height: 100%;
}
.Daohang {
  padding: 1% 5% 1% 5%;
  border: 1px solid rgb(230, 230, 230);
}
.el-menu-item {
  font-size: 20px;
  color: black !important;
  margin: 0 2% !important;
}
.idname {
  float: left;
  width: 35%;
}
.idbtn {
  float: left;
  width: 65%;
}
.icon {
  float: left;
  width: 5%;
}
.el-button {
  width: 65px;
  height: 25px;
  line-height: 25px;
  padding: 0px;
}
.el-icon-message-solid {
  font-size: 35px;
  color: rgb(229, 143, 58);
  margin-top: 22px;
}
.el-menu.el-menu--horizontal {
  border: none;
}
.quanbu {
  height: 100%;
}
.el-col {
  float: left;
  width: 10%;
}
#yuangong > p {
  float: left;
  width: 60%;
}
.el-descriptions {
  width: 300px;
  padding-left: 10px;
}
.btn1 {
  margin: 20px 0px 10px 85px;
}
</style>